<header class="page-header clearfix">
    <h4><a ui-sref="app-service"><i class="fa fa-arrow-left"></i></a>应用 {{::dtl.appCode}}</h4>
    <div class="toolbox">
        <a type="button" ui-sref="app-service-version-publish.deploy({appId: dtl.id, k8sCode: dtl.k8sCode,namespace:dtl.namespace})"><i class="fa fa-plus"></i>添加服务</a>
    </div>
    <ol class="breadcrumb">
        <li><a>我的应用</a></li>
        <li><a ui-sref="app-service">应用管理</a></li>
        <li class="active">应用详情</li>
    </ol>
</header>
<section>
    <div class="panel">
        <div class="panel-heading">详情</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-3">
                    <dt>名称</dt>
                    <dd>{{::dtl.appName}}</dd>
                </div>
                <div class="col-md-3">
                    <dt>编码</dt>
                    <dd>{{::dtl.appCode}}</dd>
                </div>
                <div class="col-md-3">
                    <dt>所在集群</dt>
                    <dd><a ui-sref="k8s-overview({kDbCode: dtl.k8sCode})">{{::dtl.k8sCode}}</a></dd>
                </div>
                <div class="col-md-3">
                    <dt>所在租户</dt>
                    <dd><a ui-sref="k8s-lessee({kDbCode: dtl.k8sCode})">{{::dtl.namespace}}</a></dd>
                </div>
            </div>
            <dt ng-switch="dtl.edition">简介
                    <a ng-switch-when="false" href="javascript: void(0)" ng-click="dtl.editDetail()"
                       class="margin-left-5"><i class="fa fa-pencil"></i></a>
                    <a ng-switch-when="true" href="javascript: void(0)" ng-click="dtl.saveEdit()"
                       class="margin-left-5 text-success"><i class="fa fa-check"></i></a>
                    <a ng-switch-when="true" href="javascript: void(0)" ng-click="dtl.cancelEdit()"
                       class="margin-left-5 text-danger"><i class="fa fa-times"></i></a>
                    <span ng-switch-when="loading" class="margin-left-5"><i class="fa fa-refresh fa-spin fa-fw"></i></span>
                </dt>
            <dd ng-switch="dtl.edition">
                <span ng-switch-when="false">{{::dtl.content || '-'}}</span>
                <textarea ng-model="dtl.content_edit" style="resize: none" class="form-control" ng-switch-default/>
            </dd>
        </div>
    </div>
    </div>
    <h5>服务列表</h5>
    <div class="panel panel-list" ng-style="::ser.border" ng-repeat="ser in dtl.serviceList">
        <div class="panel-body">
            <div class="form-search clearfix">
                <strong ng-style="::ser.color" style="line-height: 30px; font-size: 16px">{{ser.serviceCode}}</strong>
                <div ng-if="!ser.deleting" class="pull-right">
                    <a ui-sref="app-service-version-publish.deploy({appId: ser.appId, k8sCode: ser.k8sCode,
                    serId:ser.serviceId, verId: elem.versionId, serCode:ser.serviceCode,namespace: dtl.namespace})" class="btn btn-default btn-sm" style="margin-bottom: 0">添加版本</a>
                    <button ng-click="dtl.deleteService(ser)" class="btn btn-default btn-sm" style="margin-bottom: 0">移除服务</button>
                    <a class="btn btn-default btn-sm" style="margin-bottom: 0">所有版本</a>
                </div>
                <div ng-if="ser.deleting" class="pull-right">
                    <div class="loading"></div>
                </div>
            </div>
            <service-version-table></service-version-table>
        </div>
    </div>
    <div class="loading" style="margin: 0 auto" ng-show="!dtl.serviceList"></div>
    <div ng-show="dtl.serviceList" class="pagination-group margin-bottom-20">
        <ui-pagination-info items-per-page="5" items-per-page-select="false" total-items="dtl.page.totalItems" current-page="dtl.page.currentPage"></ui-pagination-info>
        <button type="button" ng-click="dtl.getList()" class="btn btn-default btn-refresh"><i class="fa fa-refresh"></i></button>
        <ui-pagination items-per-page="5" total-items="dtl.page.totalItems" ng-model="dtl.page.currentPage" ng-change="dtl.getList()"></ui-pagination>
    </div>
</section>